 <template>
  <div class="my">
    <div class="person-center">个人中心</div>
      <p class="iconfont icon-left" @click="go()"></p>

    <div class="main">
      <div class="userifo-box">
        <div class="userifo">
          <p>Hi,欢迎来到花礼网</p>
          <p>
            <router-link to="/loginss" :class="'login'">登录/注册</router-link>
          </p>
        </div>
      </div>
      <div class="content">
        <div class="order">
          <div class="panel-head">
            <p class="myOrder">我的订单</p>
            <router-link to="/loginss" :class="'book'">全部订单>
            </router-link>
          </div>
          <div class="panel-body">
            <div class="panel-body-item">
              <img src="../../assets/images/my.images/pay.png"
                   alt="">
              <p>待付款</p>
            </div>
            <div class="panel-body-item">
              <img src="../../assets/images/my.images/pay2.png"
                   alt="">
              <p>今日配送</p>
            </div>
            <div class="panel-body-item">
              <img src="../../assets/images/my.images/pay4.png"
                   alt="">
              <p>待评价</p>
            </div>
          </div>
        </div>
        <div class="order">
          <div class="link-box">
            <div class="link-box-item">
              <i class="iconfont icon-coupon"></i>
              <p>优惠卷</p>
            </div>
            <div class="link-box-item">
              <i class="iconfont icon-tubiaozhizuomoban"></i>
              <p>权益卡</p>
            </div>
            <div class="link-box-item">
              <i class="iconfont icon-yue"></i>
              <p>余额</p>
            </div>
            <div class="link-box-item">
              <i class="iconfont icon-uEA-ste-service-"></i>
              <p>会员积分</p>
            </div>
          </div>
          <p class="undeline"></p>
          <div class="link-box">
            <div class="link-box-item">
              <i class="iconfont icon-location"></i>
              <p>收货地址</p>
            </div>
            <div class="link-box-item">
              <i class="iconfont icon-icon-test"></i>
              <p>生日纪念提醒</p>
            </div>
            <div class="link-box-item">
              <i class="iconfont icon-shoucang"></i>
              <p>我的收藏</p>
            </div>
            <div class="link-box-item">
              <i class="iconfont icon-liulanjilu"></i>
              <p>浏览记录</p>
            </div>
          </div>
        </div>
        <div class="order">
          <div class="link-box">
            <div class="link-box-item">
              <i class="iconfont icon-sevice"></i>
              <p>联系客服</p>
            </div>
            <div class="link-box-item">
              <i class="iconfont icon-bangzhu"></i>
              <p>帮助中心</p>
            </div>
            <div class="link-box-item">
              <i class="iconfont icon-guanyu"></i>
              <p>关于花礼</p>
            </div>
            <div class="link-box-item">
              <i class="iconfont icon-shezhi"></i>
              <p>设置</p>
            </div>
          </div>

        </div>
        <div class="content-foot"
             :class="{active:isActive}">
          <div class="content-foot-left"><img src="../../assets/images/my.images/wxguanjia-kf.png"
                 alt=""></div>

          <p class="content-foot-center">
            Hi~我是您的专属助理喜棠，可以给您推荐礼物和跟踪订单，有需求时，1对1帮您⾛绿⾊通道处理~
          </p>
          <p class="content-foot-right">加我微信</p>
          <span class="iconfont icon-Iconinfoicon-"
                @click="change()"></span>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.my {
  background: #e9ecf0;
}
.undeline {
  border-top: 1px solid #e9ecf0;
  margin: 0rem 1.12rem 0rem 1.12rem;
}
.iconfont {
  margin-bottom: 0.5rem;
  display: block;
}
.person-center {
  height: 3.14rem;
  line-height: 3.14285714rem;
  background: #fff;
  font-size: 1.14rem;
  text-align: center;
  line-height: 3.14rem;
  position: relative;
}
.main {
  background: url("../../assets/images/my.images/bg.png");
  background-repeat: no-repeat;
  background-size: contain;
  width: 100%;
  padding-bottom: 6rem;
  font-size: 15px;
}
.router-link-active {
  text-decoration: none;
}
.userifo-box {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 7rem;
  width: 100%;
  text-align: center;
  color: white;
}

.login{
  display: inline-block;
  text-decoration: none;
  background: white;
  color: black;
  width:8rem;
  height: 2.3rem;
  line-height: 2.3rem;
  border-radius: 5rem;
  margin-top: 0.57rem;
}
.content {
  margin: 0rem 0.57rem;
}
.order {
  border-radius: 0.28rem;
  background: white;
  margin-bottom: 0.57rem;
}
.panel-head {
  height: 3.14rem;
  line-height: 3.14rem;
  display: flex;
  justify-content: space-between;
  padding-right: 1.12rem;
  margin-left: 1.12rem;
  border-bottom: 1px solid #e9ecf0;
}
.myOrder {
  font-size: 1.14rem;
}
.panel-body {
  display: flex;
  justify-content: space-around;
}
.panel-body-item {
  padding: 0.85rem 0rem;
}
.panel-body img {
  width: 2.28rem;
  display: block;
  margin: 0px auto;
}
.link-box {
  font-size: 0.85rem;
  display: flex;
  justify-content: space-between;
  text-align: center;
  padding: 1.5rem 0rem;
}
.link-box-item {
  width: 100%;
}
.link-box .iconfont {
  font-size: 1.42rem;
}
.link-box .icon-uEA-ste-service- {
  font-size: 1rem;
  display: block;
  padding: 0.3rem 0rem 0.2rem 0rem;
}
.content-foot {
  background: url("../../assets/images/my.images/bg_4.png");
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  padding: 1.14rem 0.57rem;
  justify-content: center;
  align-items: center;
  position: relative;
}
.content-foot-left {
  width: 10%;
}
.content-foot-left img {
  width: 100%;
}
.content-foot-center {
  width: 63%;
  font-size: 0.8rem;
  background: url("../../assets/images/my.images/bg2.png");
  background-repeat: no-repeat;
  background-size: cover;
  padding: 0.5rem 0.7rem;
}
.content-foot-right {
  width: 25%;
  text-align: center;
  background: rgba(255, 115, 76, 1);
  border-radius: 1rem;
  font-size: 0.85rem;
  color: #ffffff;
  height: 2rem;
  line-height: 2rem;
  margin-left: 0.5rem;
}
.icon-Iconinfoicon- {
  position: absolute;
  right: 10px;
  top: 10px;
  color: #c8ada8;
}
.active {
  display: none;
}
.icon-left{
  position: absolute;
  top:18px;
  left: 20px;  
}
.router-link-active{
  color: black;
}
.book{
  text-decoration: none;
  color: black;
}
</style>

<script>
export default {
  data () {
    return {
      isActive: false
    }
  },
  methods: {
    change () {
      this.isActive = !this.isActive
    },
    go(){
      this.$router.back();
    }
  }
}
</script>